<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
    <div class="container-div">
     <div class="row">
    	<div class="col-sm-12 search-collapse">
				<form id="incomeInfo-form">
					<div class="select-list">
						<ul>
							<li>
								报送年月：<input type="text" id="wlYm" name="wlYm"/>
							</li>
							<li>
								项目名称：<input type="text" id="proName" name="proName"/>
							</li>
							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
							    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>
		<div class="btn-group-sm hidden-xs" id="toolbar" role="group">
			<a class="btn btn-success" onclick="impIncDt()" >
		            <i class="fa fa-cloud-upload"></i> 导入收入数据
		    </a>
		    <a class="btn btn-warning" onclick="downloadTemplate()" >
		            <i class="fa fa-download"></i> 下载模板
		    </a>
			<a class="btn btn-primary btn-edit" onclick="countBywlYm()" >
	            <i class="fa fa-edit"></i> 生成收入报送单
	        </a>
		</div>
			
		<div class="col-sm-12 select-table table-striped">
			<table id="bootstrap-table" data-mobile-responsive="true"></table>
		</div>
    </div>
    <div th:include="include :: footer"></div>
    
	<!-- 模态框（Modal） -->
	<div class="modal fade" id="impModal" role="dialog" aria-labelledby="impModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" 
							aria-hidden="true">×
					</button>
					<h4 class="modal-title" id="impModalLabel">
						月度收入数据导入
					</h4>
				</div>
				<div class="modal-body">
					<input id="excelFile" name="excelFile" type="file" class="file" data-show-preview="false">
					<div class="text-center">
						 <button type="button" id="batchSubmit" class="btn btn-primary">导入</button>
				  		 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					</div>
				</div>
			</div>
		</div>
	</div>
    
    <script th:inline="javascript">
        var prefix = ctx + "pm/incomePro";
        var wlDatas = [[${@dict.getType('pm_emp_level')}]];

        $(function() {
            var options = {
                url: prefix + "/list",
                modalName: "月度收入报送（按项目）",
                uniqueId:"id",
                search:false,
                showSearch:false,
                showColumns:false,
                showToggle:false,
                showExport:true,
                showRefresh:false,
                columns: [{
		            checkbox: true
		        },
				{
					field : 'id', 
					title : '主键ID',
					visible: false
				},{
					field : 'wlYm', 
					title : '年月' 
				},
				{
					field : 'proSn', 
					title : '项目编号' 
				},
				{
					field : 'proName', 
					title : '项目名称' 
				},
				{
					field : 'ctrSn', 
					title : '订单编号' ,
					visible: false
				},
				{
					field : 'ctrLevel', 
					title : '人员级别' ,
		            formatter: function(value, row, index) {
		            	return $.table.selectDictLabel(wlDatas, value);
		            }
				},
				{
					field : 'ctrPmons', 
					title : '订单人月数' 
				},
				{
					field : 'ctrUnp', 
					title : '人员单价' 
				},
				{
					field : 'ctrTotal', 
					title : '订单金额' 
				},
				{
					field : 'wlLastPmons', 
					title : '累计到上月人月数' 
				},
				{
					field : 'wlPmons', 
					title : '累计到本月人月数' 
				},
				{
					field : 'wlLastTotal', 
					title : '累计到上月金额' 
				},
				{
					field : 'wlTotal', 
					title : '累计到本月金额' 
				},
				{
					field : 'wlCurrPmons', 
					title : '本月上报人月数' 
				},
				{
					field : 'wlCurrTotal', 
					title : '本月上报金额' 
				}
				]
            };
            $.table.init(options);
        });
        
        // 计算报送单
		function countBywlYm(){
			var wlYm = $("#wlYm").val();
			var proName = $("#proName").val();
			$.operate.submit(prefix + "/countBywlYm", "post", "json", {"wlYm": wlYm, "proName": proName});
			$.table.refresh();
		}
        
        // 导入收入数据
		function impIncDt(){
			$('#excelFile').fileinput('clear');
			$('#impModal').modal('show');
        }
        
		// 下载模板
		function downloadTemplate(){
			$.modal.loading("正在下载模板，请稍后...");
			$.post(prefix +"/template", '', function(result) {
				if (result.code == web_status.SUCCESS) {
			        window.location.href = ctx + "common/download?fileName=" + result.msg + "&delete=" + true;
				} else {
					$.modal.alertError(result.msg);
				}
				$.modal.closeLoading();
			});
		}
		
		//初始化fileinput控件（第一次初始化）
	  	function initFileInput(ctrlName, uploadUrl) { 
	   		var control = $('#' + ctrlName);
	   		control.fileinput({
	   	   	 	     language: 'zh',
	   		         uploadUrl: uploadUrl, //上传的地址
	   		         showPreview: false,
	   		         allowedFileExtensions : ['xlsx', 'xls'],//接收的文件后缀
	   		         minFileCount: 1,                                        // 最小上传数量
	   		         maxFileCount: 1,                                        // 最大上传数量
	   		         showUpload: false, //是否显示上传按钮
	   		         showCaption: true,//是否显示标题
	   		         showRemove:false,                                       // 显示移除按钮
	   		         uploadClass:"btn btn-success",                        // 上传按钮样式
	   		         browseClass: "btn btn-primary", //按钮样式
	   		         autoReplace:true,
	   		         //enctype: 'multipart/form-data',
	   		         previewFileIcon: "<i class='glyphicon glyphicon-king'></i>"
	   		         
	   	   	});
	      }
	    
	    initFileInput("excelFile", prefix + "/impExcel");
	    
		$('#batchSubmit').on('click',function(){
			$('#excelFile').fileinput('upload');
	    });
	    
		//  uploadAsync设置为true并且已触发批量上传时被触发
		$("#excelFile").on("fileuploaded", function(event,data,previewid,index) {
			var result = data.response;
			if (result.code == '0') {
	        	$.modal.msgSuccess("批量导入成功");
	    		$.table.refresh();
	    		$('#impModal').modal('hide');
	        } else {
	        	layer.alert(result.msg, {
	    	        icon: 0,
	    	        area:['60%','90%'],
	    	        title: "系统提示",
	    	    }, function (index) {
	    	    	layer.close(index);
	    	    	$('#impModal').modal('hide');
	    	    });
	        }
	    	$.modal.closeLoading();
		 });
		
		$("#excelFile").on('fileerror', function(event, data, msg) {
			$.modal.alertError("批量导入成功失败"+msg);
		});
		
    </script>
</body>
</html>